<template>
  <div class="artilce-list" @scroll="onScroll" ref="articleKeep">
    <van-pull-refresh
      v-model="pullLoading"
      @refresh="onRefresh"
      success-text="刷新成功"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          @click="$router.push(`/article?id=${item.art_id}`)"
          v-for="item in list"
          :key="item.art_id"
        >
          <template>
            <!-- 标题部分 -->
            <div>{{ item.title }}</div>
            <!-- 图片部分 -->
            <van-grid :border="false" :column-num="item.cover.type">
              <van-grid-item
                v-for="(pic, index) in item.cover.images"
                :key="index"
              >
                <van-image :src="pic" />
              </van-grid-item>
            </van-grid>
            <!-- 底部信息部分 -->
            <div class="info-box">
              <div class="user-box">
                <span>{{ item.aut_name }}</span>
                <span>{{ item.comm_count }}评论</span>
                <span>{{ item.pubdate | relaTime }}</span>
              </div>
              <van-icon name="cross"/>
            </div>
          </template>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { articleListAPI } from '@/api/article'
export default {
  props: {
    channel_id: {
      require: true
    }
  },
  data() {
    return {
      pullLoading: false,
      loading: false,
      finished: false,
      list: [],
      timestamp: Date.now(),
      scrollTop: 0
    }
  },
  methods: {
    onScroll() {
      this.scrollTop = this.$refs.articleKeep.scrollTop
    },
    async onLoad() {
      const res = await articleListAPI({
        channel_id: this.channel_id,
        timestamp: this.timestamp
      })

      this.timestamp = res.data.pre_timestamp
      // 把返回的新闻列表加到数组里
      // 不能用赋值，因为会覆盖导致铺不满，一直在闪
      //  this.list = res.data.results
      this.list.push(...res.data.results)

      // 当本次加载完数据后要把loading改为false
      // loading为true代表加载中，onLoad调用会自动把他改成true
      // 所以当我们自己加载完数据要改为false，才可以进行下次加载
      this.loading = false

      // 如果加载完了，返回的时间戳为null，所以这里取反代表判断他是否为null
      // 为null就把finished改为true，代表加载完了不要加载
      if (this.timestamp == null) {
        this.finished = true
      }
    },
    async onRefresh() {
      const res = await articleListAPI({
        channel_id: this.channel_id,
        timestamp: Date.now()
      })
      this.pullLoading = false

      this.list = res.data.results

      this.timestamp = res.data.pre_timestamp

      this.finished = false
    }
  },
  activated() {
    this.$refs.articleKeep.scrollTop = this.scrollTop
  }
}
</script>

<style lang="less" socped>
.artilce-list {
  position: fixed;
  /* 定位后div没有宽度了，所以要手动设置跟屏幕一样大 */
  width: 100%;
  /* 导航栏的高度+频道栏的高度 */
  top: 90px;
  /* 设置距离tabbar高度 */
  bottom: 50px;
  overflow: auto;
}
.info-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .user-box {
    span {
      font-size: 12px;
      color: gray;
    }
    span:nth-child(2) {
      margin-left: 10px;
      margin-right: 10px;
    }
  }
}
</style>
